<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>赠送详情</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/orderDetail.css">
    <link rel="stylesheet" href="./css/giveDetail.css">
    <style type="text/css">
    body, html{font-family: PingFangSC-Regular, sans-serif;}
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.2);
            z-index: 99;
            display: none;
        }
        .msg_box{
            width: 80%;
            min-height: 130px;
            position: absolute;
            left: 50%;
            top: 40%;
            margin-left: -40%;
            z-index: 999;
            background: #fff;
            border-radius: 10px;
            text-align: center;
        }
        .title{
             height: 40px;
             line-height: 40px;
        }
        .content{
            padding: 0 18px 50px 18px;
        }
        .okbtn{
            color: #007bfe;
            height: 40px;
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 40px;
            font-weight: bold;
            border-top: 1px solid #eee;
        }
    </style>
</head>

<body>
    <div class="orderDetail">
        <div class="mask">
            <div class="msg_box">
                <div class="title">提示</div>
                <div class="content"></div>
                <div class="okbtn">确认</div>
            </div>
        </div>
        <div class="goods_box">
            <div class="goods">
                <div class="goods_ing_box">
                    <img class="goodsImg" src="./image/goodsImg.png" alt="">
                    <img class="jiaobiao" src="./image/songchu.png" alt="">
                </div>
                <div class="goods_name_box">
                    <div class="goods_name"></div>
                    <span class="goods_adress"></span>
                </div>
                <!--<div class="chevron_right">-->
                    <!--<img src="./image/chevron_right.png" alt="">-->
                <!--</div>-->
            </div>
        </div>
        <div class="give_info_box gift_info">
            <div class="give_info gift_accept_fangshi_box" style="display: none">
                <div class="give_left">赠送方式</div>
                <div class="give_right"><span class="direct_to_user_fangshi">赠送多人</span></div>
            </div>
            <div class="give_info gift_accept_songzhi_box">
                <div class="give_left">赠送至</div>
                <div class="give_right"><span class="direct_to_user_mobile"></span></div>
            </div>
            <div class="give_info">
                <div class="give_left">赠送时间</div>
                <div class="give_right"><span class="gift_out_datetime"></span></div>
            </div>
            <div class="give_info bor_no gift_accept_datetime_box">
                <div class="give_left">接收时间</div>
                <div class="give_right"><span class="gift_accept_datetime"></span></div>
            </div>
            <div class="give_info bor_no gift_accept_ylingqu_box">
                <div class="give_left">已领取</div>
                <div class="give_right"><span class="gift_accept_ylingqu"></span></div>
            </div>
        </div>
        <div class="line"></div>
        <div class="goods_two">
            <div class="number">
                <div class="num1">
                    <div class="amount"><span class="keeping_amount">0</span></div>
                    <div class="count">数量</div>
                </div>
                <div class="nums">
                    <div class="amount">¥<span class="price">0</span></div>
                    <div class="count">单价</div>
                </div>
                <div class="num3">
                    <div class="amount"><span class="up_down_percent">0</span>%</div>
                    <div class="count">涨幅度</div>
                </div>
            </div>
            <div class="warehouse_list">
               <!--  <div class="warehouse_item">
                    <div class="en_code">T0WR10DW2018C1AA01</div>
                    <div class="warehouse_detail">
                        <div class="day">存仓天数: 30天</div>
                        <div class="detailed">明细&nbsp;&nbsp;
                            <img src="./image/chevron_right.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="warehouse_item">
                    <div class="en_code">T0WR10DW2018C1AA01</div>
                    <div class="warehouse_detail">
                        <div class="day">存仓天数: 30天</div>
                        <div class="detailed">明细&nbsp;&nbsp;
                            <img src="./image/chevron_right.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="warehouse_item bor_no">
                    <div class="en_code">T0WR10DW2018C1AA01</div>
                    <div class="warehouse_detail">
                        <div class="day">存仓天数: 30天</div>
                        <div class="detailed">明细&nbsp;&nbsp;
                            <img src="./image/chevron_right.png" alt="">
                        </div>
                    </div>
                </div> -->
            </div>
            <div class="toggle_box">
                <span class="zhankai_btn" style="display: none">展开全部
                </span>
                <span class="shouqi_btn">点击收起
                </span>&nbsp;&nbsp;
                <div class="zhankai" style="display: none">
                    <!--这个 zhankai 换成 shouqi 旋转图标-->
                    <img  src="./image/zhankai.png" alt="">
                </div>
                <div class="shouqi">
                    <!--这个 shouqi 换成 shouqi 旋转图标-->
                    <img src="./image/zhankai.png" alt="">
                </div>
            </div>
            <div class="line"></div>
            <div class="goods_three">
                <div class="person_info buyer_box">
                    <div class="person_left">买家姓名</div>
                    <div class="person_right"><span class="buyer_user_name"></span></div>
                </div>
                <div class="person_info total_value_box">
                    <div class="person_left">产品总值</div>
                    <div class="person_right">¥<span class="total_amount">0</span></div>
                </div>

                <div class="warehouse_info">
                    <div class="warehouse_left">存仓费共计</div>
                    <div class="warehouse_right red_color">-¥<span class="repo_amount"></span></div>
                </div>
                <div class="person_info shouxufei_box">
                    <div class="person_left">交易手续费</div>
                    <div class="person_right red_color">-¥<span class="procedure_amount">0</span></div>
                </div>
                <div class="warehouse_info">
                    <div class="warehouse_left">
                        预付存仓费
                        <div class="red_color prepaid_error">预付存仓费时限为48小时, 按对方接收时间计费, 剩余将退回账户</div>
                    </div>
                    <div class="warehouse_right red_color">-¥<span class="as_gift_pre_pay_repo_cost_amount"></span></div>
                </div>
                <div class="warehouse_info bor_no">
                    <div class="warehouse_left">存仓费优惠</div>
                    <div class="warehouse_right">¥<span class="repo_preferential_amount">0</span></div>
                </div>
                <div class="person_info bor_no shouxufei_box">
                    <div class="person_left">手续费优惠</div>
                    <div class="person_right">¥<span class="procedure_preferential_amount">0</span></div>
                </div>
            </div>
            <div class="goods_three">
                <div class="person_info">
                    <div class="person_left">总计</div>
                    <div class="person_right">¥<span class="to_seller_user_amount">0</span></div>
                </div>

                <div class="person_info bor_no payment_method_box">
                    <div class="person_left bor_no">支付方式</div>
                    <div class="person_right"><span class="payment_method_display">支付宝</span></div>
                </div>

                <div class="person_info trade_datetime_box">
                    <div class="person_left">交易时间</div>
                    <div class="person_right"><span class="trade_datetime"></span></div>
                </div>
                <div class="person_info bor_no amount_to_display_box">
                    <div class="person_left">收款流向</div>
                    <div class="person_right"><span class="amount_to_display">账户余额</span></div>
                </div>
            </div>
        </div>
<!--         <div class="del_btn">
            删除
        </div>
        <div class="boottom_btn">
            <div>编辑</div>
            <div>不送了</div>
            <p class="no_send"></p>
        </div> -->
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
</script>

<script type="text/javascript">
$(function () {
    (function ($) {
                $.getUrlParam = function (name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]); return null;
                }

                $.render_block_item = function(block){
                    var s = '<div class="warehouse_item">' + 
                                '<div class="en_code">' + block.unique_code + '</div>' + 
                                '<div class="warehouse_detail">' +
                                    '<div class="day">存仓天数: ' + block.days + '天</div>' +
                                    '<!-- <div class="detailed">明细&nbsp;&nbsp;' +
                                        '<img src="./image/chevron_right.png" alt="">' +
                                    '</div> -->' +
                                '</div>' + 
                            '</div>';
                    return s;
                }

    })(jQuery);
    $(".shouqi_btn").click(function() {
        $(".warehouse_list").hide()
        $(".shouqi_btn").hide();
        $(".zhankai_btn").show();
        $(".zhankai").show();
        $(".shouqi").hide();
    })
     $(".zhankai_btn").click(function() {
        $(".warehouse_list").show()
        $(".shouqi_btn").show();
        $(".zhankai_btn").hide();
        $(".zhankai").hide();
        $(".shouqi").show();
    })
    $(".okbtn").click(function() {
        $(".mask").hide()
    })
   
    var token =$.getUrlParam('token');
    var id = $.getUrlParam('id');
    var host = $.getUrlParam('host');
    var protocol = $.getUrlParam('protocol');
    $.support.cors = true;

    $.ajax({
        type: 'GET',
        url: protocol + '://' + host +'/product/market-orders/'+id,
        contentType: 'application/json',
        withCredentials: true,
        dataType: 'json',
        headers: {
            Authorization: 'JWT '+token,
        },
        success: function(data){
            console.log(data);
            if(!data.code) {
                if (data.as_gift && data.status == 'ING'){
                $(".jiaobiao").attr({src: './image/zengsong.png'});
                $(".gift_accept_datetime_box").hide();
                }
                if (data.as_gift && data.status == 'END'){
                    $(".jiaobiao").attr({src: './image/songchu.png'});
                }
                if (!data.as_gift && data.status == 'END'){
                    $(".gift_info").hide();
                    $(".jiaobiao").attr({src: './image/maichu.png'});
                }
                if (data.as_gift){
                    $(".buyer_box").hide();
                    $(".total_value_box").hide();
                    $(".shouxufei_box").hide();
                    $(".trade_datetime_box").hide();
                    $(".amount_to_display_box").hide();
                }else{
                    $(".payment_method_box").hide();
                }
                if(data.as_gift_multiple == true) {
                    $(".gift_accept_fangshi_box").show()
                    $(".gift_accept_ylingqu_box").show()
                    $(".gift_accept_ylingqu").html(data.picked_count);
                    $(".gift_accept_songzhi_box").hide()
                }else{
                    $(".gift_accept_fangshi_box").hide()
                    $(".gift_accept_ylingqu_box").hide()
                    $(".gift_accept_songzhi_box").show()
                }
                $(".goodsImg").attr({src: data.product_logo});
                $(".goods_name").html(data.product);
                $(".goods_adress").html(data.brand);
                $(".buyer_user_name").html(data.buyer_user_name);
                $(".direct_to_user_mobile").html(data.direct_to_user_mobile);
                $(".gift_out_datetime").html(data.gift_out_datetime);
                $(".gift_accept_datetime").html(data.gift_accept_datetime);
                $(".keeping_amount").html(data.count);
                $(".price").html(data.price);
                $(".up_down_percent").html(data.up_down_percent);
                for (var i=0; i<data.blocks.length; i++){
                    var block = data.blocks[i];
                    $(".warehouse_list").append($.render_block_item(block));
                }
                $(".repo_amount").html(data.order_info.repo_amount);
                $(".as_gift_pre_pay_repo_cost_amount").html(data.order_info.as_gift_pre_pay_repo_cost_amount);
                $(".repo_preferential_amount").html(data.order_info.repo_preferential_amount);
                $(".total_amount").html(data.order_info.amount);
                $(".payment_method_display").html(data.order_info.payment_method_display);
                $(".procedure_amount").html(data.order_info.procedure_amount);
                $(".procedure_preferential_amount").html(data.order_info.procedure_preferential_amount);
                $(".to_seller_user_amount").html(data.order_info.to_seller_user_amount);
                $(".amount_to_display").html(data.order_info.amount_to_display);
                $(".trade_datetime").html(data.order_info.trade_datetime);
            }else{
                $(".mask").show();
                $(".content").html(data.msg)
            }
            
        },
        error: function(error) {
            $(".mask").show();
            $(".content").html("加载失败")
            console.log(error)
        }
    })
})
</script>

</html>